<template>
  <div class="aside">
    <el-space direction="vertical" size="small">
      <router-link class="btn" v-for="item in staticRoutes" :key="item.path" :to="item.path">
        <div class="icon">
          <el-icon>
            <component :is="item?.meta?.icon"></component>
          </el-icon>
        </div>
        <div class="text">
          {{ item.name }}
        </div>
      </router-link>
    </el-space>
  </div>
</template>
<script setup lang="ts">
import { routes } from '@/router/routes.ts'
import { computed } from 'vue'

const staticRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.children) {
      return false
    }else if (item.meta?.showInMenu){
      return false
    }
    return true
  })
})
</script>
<style scoped lang="scss">
.aside {
  width: 200px;
  height: calc(100vh - 70px);
  position: fixed;
  top: 70px;
  padding-left: 20px;
  padding-top: 28px;
  .btn {
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 160px;
    height: 50px;
    border-radius: 10px;
    text-decoration: none;
    color: #4e4d50;
    padding-left: 10px;
  }
  .btn:hover {
    background: #fff;
    .icon {
      color: #4e4d50;
    }
    .text {
      font-weight: 600;
    }
  }
  .router-link-active {
    background: #fff;
    .icon {
      color: #4e4d50;
    }
    .text {
      font-weight: 600;
    }
  }
}
</style>
